<!--
:mc-config="{'url':'/public/item.json','method':'get','params':[],'fields':[],mcIntervalSeconds:200,watch:""}"
    //watch 观察变量 如果这个变量更新 我就刷新 逗号分割多个


mcIntervalSeconds:每隔多少秒触发一次刷新数据

//参考https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default
:mc-scroll="{open:true|false,direction:0|1|2滚动方向,step:1滚动速度,hoverStop:false悬停停止,singleHeight:26单行停顿,waitTime:2500单行停顿时间}"
基本用法。switch控制切换 direction:2 autoPlay: false,switchSingleStep: 140
switch控制切换 自定义switchSingleStep(步数大小)和switchDelay(切换时间)direction:2autoPlay: false,switchSingleStep: 100,switchDelay:50
基本用法。向右滚动 direction:2 limitMoveNum: 4
基本用法。向左滚动 direction:2 limitMoveNum: 2
-->
<template>
  <el-row class="mc-el-row mc-on-shade" v-bind="$attrs" v-on="$listeners" :style="{overflow:overflow}">
    <!-- 帮助信息 -->
    <el-col v-if="assist.show"  class="mc-el-row-assist" :span="24">
      <el-tag class="mc-el-row-assist-tag" @click="assistClick(1)">scope.row</el-tag>
      <el-switch @change="switchViewAllData" v-model="assist.viewAllData" @click="assistClick(2)"></el-switch>
      <el-dialog class="mc-el-row-assist-dialog"
        title="设计阶段仅渲染第一条数据，预览页可展开所有数据,以下数据可使用scope.row.xxx来获取数组内的数据"
        :visible.sync="apiVisible"
        width="80%">
          <el-input type="textarea" :rows="20" v-model="apiInfo"></el-input>
      </el-dialog>
    </el-col>
    <el-col class="mc-el-row-header" :span="24">
      <slot name="header"></slot>
    </el-col>

    <vue-seamless-scroll :data="dataList" :class-option="mcScroll" v-if="mcScroll.open">
      <template v-for="(item,i) in dataList">
        <slot name="row" :row="item" :index="i"></slot>
      </template>
    </vue-seamless-scroll>
    <template v-for="(item,i) in dataList" v-else>
      <slot name="row" :row="item" :index="i"></slot>
    </template>


    <el-col class="mc-el-row-pager" :span="24">

    </el-col>
    <el-col class="mc-el-row-footer" :span="24">
      <slot name="footer" :data="dataList"></slot>
    </el-col>
  </el-row>
</template>

<script>
import VueSeamlessScroll from 'vue-seamless-scroll'
import McElCol from "./McElCol";

export default {
  name: 'mc-el-row',
  data () {
    return {
        dataList:[],
        dataListCache:[],
        pageCount:this.mcPagerCount,//大于=5小于=21的奇数 多少个分页按钮
        pageSize:this.mcPageSize,//每页多少条
        pageTotal:100,
        currentPage:1,
        assist: {show:window.iframeUi,viewAllData:false},
        apiVisible:false,
        apiInfo:"",
        overflow:this.mcScroll.open?"hidden":"auto"
    }
  },
  components:{
    VueSeamlessScroll
  },
  props:{
    'mcConfig':{type:Object,default:null},
    'mcPagerCount':{type:Number,default:5},
    'mcPageSize':{type:Number,default:10},
    //{open:true}
    'mcScroll':{type:Object,default: function(){return {open:false}}},
    //参数值 这样可以接受变量 表达式之类的，暂时20个足够使用了
    'mcv1':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv2':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv3':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv4':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv5':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv6':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv7':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv8':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv9':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv10':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv11':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv12':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv13':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv14':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv15':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv16':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv17':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv18':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv19':{type:[String,Number,Date,Boolean,Array,Object],default:null},
    'mcv20':{type:[String,Number,Date,Boolean,Array,Object],default:null},
  },
  watch:{

  },
  computed:{

  },
  created () {
      this.refresh();
      if(!window.iframeUi){//布局器内 接口都缓存了 自动刷新没意义
          var _t = this;
          if(!this.mcConfig){
              return;
          }
          var intervalTimer = null;
          var mcIntervalSeconds = this.mcConfig.mcIntervalSeconds||0;
          if(mcIntervalSeconds>0){
            intervalTimer = window.setInterval(function (){
              _t.refresh();
            }, mcIntervalSeconds*1000);
          }
          //布局器会主动清理此定时任务 避免重复注册
          if(intervalTimer){
              if(!window._mcCacheIntervals){
                  window._mcCacheIntervals=[];
              }
              window._mcCacheIntervals.push(intervalTimer)
          }
      }

  },
  mounted(){
      //考虑下监听
      var _t = this;
       this.$nextTick(function(){//虚拟dom转化为真实dom后触发
          var pageVue = window.MC ? window.MC['vue'] : window.vueMc;
          if(typeof pageVue !='undefined' && pageVue && this.mcConfig){
            var watch = this.mcConfig.watch;
            if(watch){
                var watchVars = watch.trim().split(",");
                for(var n=0;n<watchVars.length;n++){
                    var varName = watchVars[n];
                    pageVue.$watch(varName,function(n,o){
                        _t.refresh();
                    },{deep:true})
                }
            }
        }
      })
  },
  updated:function(){
      if(window.iframeUi){
          this.$nextTick(function(){//虚拟dom转化为真实dom后触发 这样动态新增的结构里 仍然可以被拖拽
              window.iframeUi.magicalApi.addApiTask({methodName:"refreshDragEvent"});
          })
      }
  },
  methods:{
    refresh(){
      var request = this.$magicaltool.request;
      var _t = this;
      if(this.mcConfig && this.mcConfig.url){
          var url = this.mcConfig.url;
          var method = this.mcConfig.method||'post';
          var limit = this.mcConfig.limit||20;
          var param = {};
          var ncv = request.util.collectMcNameCompareValue(this);
          if(request.util.isMcQueryUrl(url)){
              param = request.util.paramsTomMcQuery(ncv || this.mcConfig.params);
              if(this.mcConfig.fields && this.mcConfig.fields.length>0){
                  param.fields = this.mcConfig.fields
              }
              url += url.indexOf("?")!=-1 ? "&" : "?";
              url += "limit="+limit;
          }else{
              param = request.util.paramsToJson(ncv||this.mcConfig.params);
              param.limit = limit;//加个关键词入参
          }
          request.axios({cache:true,$vue:this,url:url,method:method,param:param}).then(function(res){
            _t.dealResult(res);
          })
      }
    },

    dealResult(res){
        if(res.data){
          var resData = res.data;
          if(!Array.isArray(resData)){
            resData = [resData];//如果返回的数据不是数组，那么我们转成一维数组 这样就可以兼容更多场景的api接口
          }
          this.dataListCache = resData;
          if(resData.length>0){
            if(this.showAllDataList()){
              this.dataList = resData;
            }else {//设计阶段仅展示一条数据
              this.dataList = [resData[0]];
            }
          }
        }
       /* if(res.data && res.data.length>0){
          if(this.showAllDataList()){//设计阶段仅展示一条数据
            this.dataList = res.data;
          }else {
            this.dataList = [res.data[0]];
          }
        }*/

        if(typeof res['count']!='undefined'){
          this.pageTotal = res.count;
        }
    },
    //预览模式
    showAllDataList(){
      return !window.iframeUi;
    },
    assistClick(type){
      switch(type){
          case  1:
            var jsonHtml = JSON.stringify(this.dataListCache,null,2);
            this.apiInfo = jsonHtml;
            this.apiVisible=true;
          break;
      }
    },
    switchViewAllData(){
      if(this.assist.viewAllData){
        this.dataList = this.dataListCache;
      }else {
        if(this.dataListCache && this.dataListCache.length>0){
          this.dataList = [this.dataListCache[0]];
        }
      }
    }
  }
}
</script>

<style lang="scss">
    .mc-el-row{
      overflow: auto;
    }
    .mc-el-row-assist{
      display:none;
      position:absolute;
      left:0px;
      top:0px;
      width: 130px;
      z-index:10001;
    }
    .mc-el-row-assist-tag{
      color:#409EFF;
      height:unset;
      line-height:unset;
    }
    .magicalcoder-dragging .mc-el-row-assist{
      display:block;
    }
    .mc-el-row-assist-dialog{
      z-index: 99999 !important;
    }
</style>
